<template>
    <div class="left-sidebar-container">
    <el-card shadow="never" class="left-sidebar-card">
      <div class="user-info" v-if="user.username">
        <div class="user-avatar">
          <el-avatar
            v-if="user.avatar"
            :src="user.avatar"
            :icon="UserFilled"
            @error="handleAvatarError"
            :size="96"
            :shape="'square'"
          />
          <el-avatar v-else :icon="UserFilled" :size="64" :shape="'square'"></el-avatar>
        </div>
        <div class="user-name">{{ user.username }}</div>
        <div class="user-rank">等级：{{ user.rank }}</div>
      </div>
    </el-card>
    <el-card shadow="never" v-if="currentTab === 'home'">
      <template #header>
        <div class="card-header">
          <span>关注分类</span>
        </div>
      </template>
      <ul class="category-list">
        <li 
          v-for="(cat, idx) in categories" 
          :key="idx" 
          :class="{ active: activeCategory === cat.id }"
          @click="activeCategory = cat.id"
        >
          {{ cat.name }}
        </li>
      </ul>
    </el-card>

    <el-card shadow="never" v-if="currentTab === 'qa'">
      <template #header>
        <div class="card-header">
          <span>问题分类</span>
        </div>
      </template>
      <ul class="category-list">
        <li 
          v-for="(cat, idx) in qaCategories" 
          :key="idx" 
          :class="{ active: activeQaCategory === cat.id }"
          @click="activeQaCategory = cat.id"
        >
          {{ cat.name }}
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElCard } from 'element-plus' // 导入 ElCard 组件
import { UserFilled } from '@element-plus/icons-vue'


const props = defineProps<{
  user: { username: string; avatar: string; rank: number; id: number }
  currentTab: 'home' | 'qa' | 'course' | 'activity' | 'live'
  categories: Array<{ id: number; name: string }>
  qaCategories: Array<{ id: number; name: string }>
  activeCategory: number
  activeQaCategory: number
}>()

const emit = defineEmits(['update:activeCategory', 'update:activeQaCategory'])

const handleAvatarError = (event: Event) => {
  (event.target as HTMLImageElement).style.display = 'none'
}
const activeCategory = ref(props.activeCategory)
const activeQaCategory = ref(props.activeQaCategory)
</script>

<style scoped>
.left-sidebar-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 增加卡片间距 */
}
.left-sidebar-card {
  padding: 10px;
}
.card-header {
  font-weight: bold;
}
.category-list {
  list-style: none;
  padding: 0;
}
.category-list li {
  padding: 8px 0;
  cursor: pointer;
}
.category-list li.active {
  color: var(--el-color-primary);
}
</style>